<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>JS 事件</title>
</head>
<body>
    <h1>JS 事件</h1>
    <hr>

    <button onclick="alert('asdas')"> 点我</button>

    <button id="btn">戳我啊</button>
    <button id="btn1">砍我啊</button>
    <hr>

    <button id="jt">点击监听</button>
    <button id="removebtn">解除绑定</button>

    <br>
    <hr>

    <script>
         // 绑定事件的几种方式
         // 1. 标签属性直接绑定;
         // 2. 对象属性绑定
         var btn = document.getElementById('btn');

         btn.onclick = function(){
            alert('对象属性绑定');
         } 
         // 3.引用函数绑定 
         var btn1 = document.getElementById('btn1');
            function demo(){
                alert('引用函数绑定');
            }
            btn1.onclick = demo;


         // 事件的监听绑定
         // 有一下两种格式
         // 1. 获取对象.addEventListener("事件名(不用加on),函数名,冒泡/捕获(false(默认)/ture)")
         // 2. IE浏览器自己的方法:
         //     对象名.attachEvent("事件名(不加on)",函数名,false/ture);
         // 取消绑定的监听事件
         // 3. 对象名.removeEventListener("事件名(不加on)",函数名,false/ture)
         var jt = document.getElementById('jt');
         // console.log(jt.addEventListener);
         // 兼容性(IE8以下不兼容);
         if (jt.addEventListener) {
            jt.addEventListener('click',demo,false);
            jt.addEventListener('click',function(){
                alert('另外一种形式');
            },false);
         }else{
            // 对于IE8以下浏览器 已经有他们自己的监听方法;
            jt.attachEvent('click',demo,false);
         }
         // 注意!!!
         // addEventListener(); 方法 优点在于 可以同时进行多个事件 而不被覆盖 而onclick方法 会被覆盖;
         

         // 解除绑定
            var removeBtn = document.getElementById('removebtn');
            removeBtn.onclick = function(){
                // console.log('解绑成功!!');
                // var btn5 = document.getElementById('btn5');
                // console.log(btn5); // 兼容

                // btn5.onclick = function(){}
                // btn.onclick = null;  // 用来解除事件 
                // btn1.onclick = null;
                
                // jt.onclick = null;// 无法解绑事件监听
                 // 解除事件监听
                jt.removeEventListener('click',demo,false);//IE与Chrome通用
                //jt.detachEvent('onclick', demo); // IE中 删除监听事件格式

                // 
            }


    </script>
    

</body>
</html>